<template>
    <!-- 用个饿了么组件吧，写不动样式了 -->
    <div class="box">
        <el-form label-width="auto" class="addform" ref="formRef" status-icon :model="formData" :rules="rules"
        style="color:white">
            <!-- 第一行 -->
            <el-form-item label="溯源标题" prop="title" style="width: 300px;margin-top: 10px;">
                <el-input v-model="formData.title" autocomplete="off" />
            </el-form-item>

            <!-- 分割线 --><el-divider />
            <el-text class="mx-1" type="primary">农场信息</el-text>

            <!-- 第二行 -->
            <el-form-item label="选择地块" prop="block" style="width: 300px;margin-top: 10px;">
                <el-select placeholder="请选择地块" v-model="formData.block">
                    <el-option label="地块1" value="1" />
                    <el-option label="地块2" value="2" />
                </el-select>
            </el-form-item>

            <!-- 第三行 -->
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-form-item label="选择品种" prop="pinZhong" style="width: 300px;margin-top: 10px;">
                        <el-select placeholder="请选择品种" v-model="formData.pinZhong">
                            <el-option label="品种1" value="1" />
                            <el-option label="品种2" value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="选择种类" prop="zhongLei" style="width: 300px;margin-top: 10px;">
                        <el-select placeholder="请选择种类" v-model="formData.zhongLei">
                            <el-option label="种类1" value="1" />
                            <el-option label="种类2" value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 第四行 -->
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-form-item label="品种特性" prop="teXing" style="width: 300px;margin-top: 10px;">
                        <el-input v-model="formData.teXing" autocomplete="off" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="电商购买链接" prop="link" style="width: 300px;margin-top: 10px;">
                        <el-input v-model="formData.link" autocomplete="off" />
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 分割线 --><el-divider />
            <el-text class="mx-1" type="primary">产地环境</el-text>

            <!-- 第五行 -->
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-form-item label="农场主" prop="master" style="width: 300px;margin-top: 10px;">
                        <el-select placeholder="请选择" v-model="formData.master">
                            <el-option label="张三" value="1" />
                            <el-option label="李四" value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="农场地址" prop="address" style="width: 300px;margin-top: 10px;">
                        <el-input v-model="formData.address" autocomplete="off" />
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 第六行 -->
            <el-form-item label="农场环境" prop="enviromentImg">
                <el-upload class="avatar-uploader" :show-file-list="false" :auto-upload="false"
                    :on-change="(file: UploadFile) => getImgUrlHandler(file, 'enviromentImg')">
                    <img v-if="formData.enviromentImg" :src="formData.enviromentImg" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>

            <!-- 第七行 -->
            <el-form-item label="环境安全报告" prop="savePortImg">
                <el-upload class="avatar-uploader" :show-file-list="formData.savePortImg" :auto-upload="false"
                    :on-change="(file: UploadFile) => getImgUrlHandler(file, 'savePortImg')">
                    <img v-if="formData.savePortImg" :src="formData.savePortImg" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>

            <!-- 第八行 -->
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-form-item label="树龄" prop="treeAge" style="width: 300px;margin-top: 10px;">
                        <el-input placeholder="年" v-model="formData.treeAge" autocomplete="off" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="农场面积" prop="farmSize" style="width: 300px;margin-top: 10px;">
                        <el-input placeholder="亩" v-model="formData.farmSize" autocomplete="off" />
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 第九行 -->
            <el-form-item label="亩产量" prop="production" style="width: 300px;margin-top: 10px;">
                <el-input placeholder="kg/亩" v-model="formData.production" autocomplete="off" />
            </el-form-item>

            <!-- 分割线 --><el-divider />
            <el-text class="mx-1" type="primary">品质过程检测</el-text>

            <!-- 第十行 -->
            <el-form-item label="检测时间" prop="quiltyTextTime" style="width: 300px;margin-top: 10px;">
                <el-date-picker type="datetime" placeholder="请选择" v-model="formData.quiltyTextTime"
                    value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>

            <!-- 第十一行 -->
            <el-form-item label="上传照片" prop="quiltyProductImg">
                <el-upload class="avatar-uploader" :show-file-list="false" :auto-upload="false"
                    :on-change="(file: UploadFile) => getImgUrlHandler(file, 'quiltyProductImg')">
                    <img v-if="formData.quiltyProductImg" :src="formData.quiltyProductImg" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>

            <!-- 分割线 --><el-divider />
            <el-text class="mx-1" type="primary">采后信息</el-text>

            <!-- 第十二行 -->
            <el-form-item label="是否成熟" prop="growed" style="width: 300px;margin-top: 10px;">
                <el-radio-group v-model="formData.growed">
                    <el-radio value="1" size="large">是</el-radio>
                    <el-radio value="0" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <!-- 第十三行 -->
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-form-item label="选择采收时间" prop="harvestTime" style="width: 300px;margin-top: 10px;">
                        <el-date-picker type="datetime" placeholder="请选择" v-model="formData.harvestTime"
                            value-format="YYYY-MM-DD HH:mm:ss" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="采收负责人" prop="harvestPerson" style="width: 300px;margin-top: 10px;">
                        <el-select placeholder="请选择" v-model="formData.harvestPerson">
                            <el-option label="张三" value="1" />
                            <el-option label="李四" value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 第十四行 -->
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-form-item label="检测时间" prop="lastTextTime" style="width: 300px;margin-top: 10px;">
                        <el-date-picker type="datetime" placeholder="请选择" v-model="formData.lastTextTime"
                            value-format="YYYY-MM-DD HH:mm:ss" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="检测人" prop="textPerson" style="width: 300px;margin-top: 10px;">
                        <el-input v-model="formData.textPerson" autocomplete="off" />
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 第十五行 -->
            <el-form-item label="检测结果" prop="textAnswer" style="width: 300px;margin-top: 10px;">
                <el-input v-model="formData.textAnswer" />
            </el-form-item>

            <!-- 第十六行 -->
            <el-form-item label="产后品质检测" prop="quiltiedTestImg">
                <el-upload class="avatar-uploader" :show-file-list="false" :auto-upload="false"
                    :on-change="(file: UploadFile) => getImgUrlHandler(file, 'quiltiedTestImg')">
                    <img v-if="formData.quiltiedTestImg" :src="formData.quiltiedTestImg" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>

            <!-- 第十七行 -->
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-form-item label="包装时间" prop="packTime" style="width: 300px;margin-top: 10px;">
                        <el-date-picker type="datetime" placeholder="请选择" v-model="formData.packTime"
                            value-format="YYYY-MM-DD HH:mm:ss" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="包装负责人" prop="packPerson" style="width: 300px;margin-top: 10px;">
                        <el-input v-model="formData.packPerson" autocomplete="off" />
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 第十八行 -->
            <el-form-item label="包装图片" prop="packImg">
                <el-upload class="avatar-uploader" :show-file-list="false" :auto-upload="false"
                    :on-change="(file: UploadFile) => getImgUrlHandler(file, 'packImg')">
                    <img v-if="formData.packImg" :src="formData.packImg" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>

            <!-- 第十九行 -->
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-form-item label="物流时间" prop="transTime" style="width: 300px;margin-top: 10px;">
                        <el-date-picker type="datetime" placeholder="请选择" v-model="formData.transTime"
                            value-format="YYYY-MM-DD HH:mm:ss" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="物流负责人" prop="transPerson" style="width: 300px;margin-top: 10px;">
                        <el-input v-model="formData.transPerson" autocomplete="off" />
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 第二十行 -->
            <el-form-item label="物流图片" prop="transportImg">
                <el-upload class="avatar-uploader" :show-file-list="false" :auto-upload="false"
                    :on-change="(file: UploadFile) => getImgUrlHandler(file, 'transportImg')">
                    <img v-if="formData.transportImg" :src="formData.transportImg" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>

            <!-- 最后一行按钮 -->
            <el-form-item style="margin-left: 300px;margin-top: 30px;">
                <el-button type="primary" @click="submitHandler(formRef)"> 保存</el-button>
                <el-button @click="resetHandler">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script lang='ts' setup>
import type { IOriginForm } from '@/interface/IOrigin';
import { onBeforeMount, reactive, ref, type ModelRef, type Reactive } from 'vue';
import OSS, { type PutObjectResult } from 'ali-oss'
import type { FormInstance, FormRules, UploadFile } from 'element-plus';
import { addOrigin } from '@/api/OriginApi';
import originReg from '@/regExp/originReg'
import defaultOriginForm from '@/defaultFormData/defalutOrigin'
// 表单校验规则
const rules = reactive<FormRules>(originReg)
// 表单dom
const formRef = ref<FormInstance>()
// 收集表单数据  
const formData: Reactive<IOriginForm> = reactive(defaultOriginForm)
// 动态组件控制器
const controller: ModelRef<number> = defineModel("controller", { required: true })
// 接入oss服务
const oss = new OSS({
    region: 'oss-cn-beijing',
    accessKeyId: 'LTAI5tPPXG3RBGQhm1tzgDgp',
    accessKeySecret: 'bA3OQvm0cT1nRhwz2s0Cpkwk9KYc1z',
    bucket: 'libaoguo123'
})

const submitHandler = (formRef: FormInstance | undefined) => {
    // 前端验证
    if (!formRef) return
    console.log(formRef)
    formRef.validate(async (valid, fields) => {
        if (valid) {
            console.log(true)
            const result = await addOrigin()
            console.log(formData)
            console.log(result.data)
            controller.value = 1
        } else {
            console.log(false)
            console.log('提交失败')
        }
    })
}
const resetHandler = () => {
    // 切换页面
    controller.value = 1

}
// 提交农场环境图片函数
async function getImgUrlHandler(file: UploadFile, type: string) {
    // 根据type不同进行分类赋值
    oss.put(file.name, file.raw).then((value: PutObjectResult) => {
        switch (type) {
            case 'enviromentImg':
                formData.enviromentImg = value.url
                break;
            case 'savePortImg':
                formData.savePortImg = value.url
                break;
            case 'quiltyProductImg':
                formData.quiltyProductImg = value.url
                break;
            case 'quiltiedTestImg':
                formData.quiltiedTestImg = value.url
                break;
            case 'packImg':
                formData.packImg = value.url
                break;
            case 'transportImg':
                formData.transportImg = value.url
                break;
        }
    })
}

// 表单的非空验证
const verifyRule = (rule: any, value: string | number, callback: (err?: Error) => void) => {
    if (value === '' || value === 0) {

    } else {

    }
}
</script>

<style lang='scss' scoped>
.box {
    width: 100%;
    height: 100%;
    overflow: auto;

    .addform {
        background-color: white;
        max-width: 60%;
        height: 1650px;
        margin-top: 20px;
        margin-left: 20px;
        border-radius: 5px;
        color: white;
        margin-bottom: 30px;
        box-shadow: 1px 1px 10px 1px rgb(168, 168, 168);
        padding: 20px;
    }
}

.avatar-uploader .avatar {
    width: 50px;
    height: 50px;
    display: block;
}
</style>
<style>
.avatar-uploader .avatar {
    width: 50px;
    height: 50px;
    display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 50px;
    height: 50px;
    text-align: center;
}
</style>